<template>
        <div class="common-layout">
            <el-container>
                <el-header>Header</el-header>
                <el-container>
                    <el-aside width="200px">
                        <MyMenu></MyMenu>
                    </el-aside>
                    <el-container>
                        <el-main>Main</el-main>
                        <el-footer>Footer</el-footer>
                    </el-container>
                </el-container>
            </el-container>
        </div>
</template>

<script>
import MyMenu from "@/components/MyMenu.vue";
export default {
    name: "index",
    components: {MyMenu}
}
</script>

<style scoped>
.common-layout{
    height: 100%;
    width: 100%;
}
.el-container{
    height: 100%;
    width: 100%;
}
.el-header{
    background-color: #867b7b;
}
.el-aside{
    background-color: antiquewhite;
}
.el-main{
    background-color: cyan;
}
.el-footer{
    background-color: cadetblue;
}
</style>